<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.js}"></script>

<body>
    <center>
       <h1 style="color: chocolate;text-decoration: none">
         HELLO INDEX!
           <form th:action="@{/testRequestBody}" method="post">
               用户名：<input type="text" name="username"><br>
               密码：<input type="password" name="password"><br>
               <input type="submit">
           </form>
           <form th:action="@{/testRequestEntity}" method="post">
               用户名：<input type="text" name="username"><br>
               密码：<input type="password" name="password"><br>
               <input type="submit">
           </form>
           <a th:href="@{/testResponse}">通过servletAPI测试Response</a><br>
           <a th:href="@{/testResponseBody}">通过@ResponseBody测试Response</a><br>
           <a th:href="@{/testResponseUser}">通过@ResponseBody响应浏览器User对象</a><br>
           <div id="app">
               <a @click="testAxios" th:href="@{/testAxios}">springMVC处理Ajax请求</a>
           </div>
       </h1>
    </center>
<script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            testAxios:function (event){
                axios({
                    method: "post",
                    url:event.target.href,
                    params:{
                        username:"admin",
                        password:"123456"
                    }
                }).then(function (response){
                    alert(response.data);
                });
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>